<template>
  <div>
    <InfoWindow v-show="showInfoWindowBool" ref="infoWindow" :img="img" :station-info="stationInfo">
    </InfoWindow>
  </div>
</template>

<script>
import * as api from '../api/index'
import MapData from '../store/MapData'
import InfoWindow from "./InfoWindow";
import ErrorMsgAlert from "./ErrorMsgAlert";

export default {
  name: "StationsMarker",
  data() {
    return {
      showInfoWindowBool: false,
      markers: {
        OnWork: [],
        OffWork: [],
        OverWork: [],
        WeekendOnWork: [],
        WeekendOffWork: [],
        Unknown: []
      },
      img: {
        src: "",
        width: 0,
        height: 0,
      },
      stationInfo: {
        id: 0,
        name: "",
        line: "",
        type: "",
        geoName: "",
        geoLocation: [],
        runTime: "",
        runStatus: "",
      }
    }
  },
  components: {InfoWindow},
  mounted() {
    this.bus.$on("closeInfoWindow", () => {
      this.showInfoWindowBool = false;
    })
  },
  methods: {
    initMarkers() {
      let AMap = MapData.AMap;
      let map = MapData.Map;

      //--------添加广电运通的标记---------
      const icon = new AMap.Icon({
        size: new AMap.Size(48, 48),    // 图标尺寸
        image: require("../assets/icons/grgbanking.png"),  // Icon的图像
        imageOffset: new AMap.Pixel(0, 0),
        imageSize: new AMap.Size(48, 48)   // 根据所设置的大小拉伸或压缩图片
      });
      const grg_marker = new AMap.Marker({
        position: [113.445970, 23.142824],
        icon: icon, // 添加 Icon 实例
        title: '广电运通',
        zoom: 8
      });
      grg_marker.on('click', () => {
        this.$message('We Move Faster');
      })
      map.add(grg_marker);

      //------接口获取站点标记信息
      let p = new Promise((resolve) => {
        api.getStations()
          .then((res) => {
            let stations = res.data;
            for (const station of stations) {
              if (station.runStatus !== "Hidden") {
                //--------添加站点的标记---------
                let markerIcon;
                //根据类型区分图标
                if (station.type === "上班") {
                  markerIcon = require("../assets/markers/bus_1.png")// Icon的图像
                } else if (station.type === "下班") {
                  markerIcon = require("../assets/markers/bus_2.png") // Icon的图像
                } else if (station.type === "加班") {
                  markerIcon = require("../assets/markers/bus_3.png") // Icon的图像
                } else if (station.type === "周末上班") {
                  markerIcon = require("../assets/markers/bus_4.png") // Icon的图像
                } else if (station.type === "周末下班") {
                  markerIcon = require("../assets/markers/bus_5.png") // Icon的图像
                } else {
                  markerIcon = require("../assets/markers/bus_6.png") // Icon的图像
                }
                //定义基本信息
                const icon = new AMap.Icon({
                  size: new AMap.Size(36, 36),    // 图标尺寸
                  image: markerIcon,  // Icon的图像
                  imageOffset: new AMap.Pixel(0, 0),
                  imageSize: new AMap.Size(36, 36)   // 根据所设置的大小拉伸或压缩图片
                });
                let LngLat = station.geoLocation.split(',');
                //构造图标
                const marker = new AMap.Marker({
                  position: [Number(LngLat[0]), Number(LngLat[1])],
                  icon: icon, // 添加 Icon 实例
                  title: station.name,
                  zoom: 8
                });

                marker.line = station.line;
                marker.typeStr = station.type;
                marker.geoName = station.geoName;
                marker.runTime = station.runTime;

                //根据类型存进不同的数组中
                if (station.type === "上班") {
                  this.markers.OnWork.push(marker);
                } else if (station.type === "下班") {
                  this.markers.OffWork.push(marker);
                } else if (station.type === "加班") {
                  this.markers.OverWork.push(marker);
                } else if (station.type === "周末上班") {
                  this.markers.WeekendOnWork.push(marker);
                } else if (station.type === "周末下班") {
                  this.markers.WeekendOffWork.push(marker);
                } else {
                  this.markers.Unknown.push(marker);
                }
              }
            }
            let that = this;
            this.bus.$on("markerFilter", function (obj) {
              that.filterByType(obj.flag, obj.label)
            });
            resolve()
          }).catch(() => {
          ErrorMsgAlert.methods.alert(this, "网络好像出了点问题...")
        });
      })

      //添加marker信息窗口
      p.then(() => {
        this.bindInfoWindow(this.markers.OnWork);
        this.bindInfoWindow(this.markers.OffWork);
        this.bindInfoWindow(this.markers.OverWork);
        this.bindInfoWindow(this.markers.WeekendOnWork);
        this.bindInfoWindow(this.markers.WeekendOffWork);
        this.bindInfoWindow(this.markers.Unknown);
        map.add(this.markers.OnWork)
      }).then(() => {
        console.log("站点标记初始化完毕，总共添加" + map.getAllOverlays('marker').length + "个站点")
      })
    },
    chooseType(label) {
      //根据类型存进不同的数组中
      if (label === "上班") {
        return this.markers.OnWork;
      } else if (label === "下班") {
        return this.markers.OffWork;
      } else if (label === "加班") {
        return this.markers.OverWork;
      } else if (label === "周末上班") {
        return this.markers.WeekendOnWork;
      } else if (label === "周末下班") {
        return this.markers.WeekendOffWork;
      }
    },
    filterByType(flag, label) {
      let map = MapData.Map;
      if (flag) {
        map.add(this.chooseType(label));
      } else {
        map.remove(this.chooseType(label));
      }
    },
    bindInfoWindow(markerList) {
      let map = MapData.Map;
      for (let marker of markerList) {
        marker.on('click', (e) => {
          // 点击后创建自定义信息窗口
          this.showInfoWindowBool = true;
          this.img.src = require('../assets/images/grg-bus-banner.png');
          this.img.height = 64;
          this.img.width = 240;
          this.stationInfo.name = marker.getTitle();
          this.stationInfo.line = marker.line;
          this.stationInfo.type = marker.typeStr;
          this.stationInfo.geoName = marker.geoName;
          this.stationInfo.runTime = marker.runTime;
          let position = marker.getPosition();
          this.stationInfo.geoLocation = position.toArray();
          const infoWindow = new AMap.InfoWindow({
            isCustom: true,
            content: this.$refs.infoWindow.$el,
            offset: new AMap.Pixel(24, 24),
            closeWhenClickMap: true
          });
          infoWindow.open(map, e.lnglat);
          // 调用组件方法，初始化组件页面的infoWindow等数据
          this.$refs.infoWindow.initialize({
            overlay: e.target,
            infoWindow: infoWindow
          });
          // 把地图中心点设置为当前点击的标记点
          map.setZoomAndCenter(map.zoom, position);
        });
      }
    },
  }
}
</script>

<style scoped>
</style>
